<template>
    <div id="app">
        <Head>技能专长</Head>
        <div class="list">
            <div class="item" v-for="(item,index) in list" :key="index">
                <div class="name">{{item.custom_name?item.custom_name:item.title}}&nbsp;—&nbsp;{{item.level==1?'入门':item.level==2?'熟练':'精通'}}</div>
                <div class="btndiv">
                    <img class="update" @click="updateclick(item.id)" src="../../assets/freelance/images/update_2.png"/>
                    <img class="delete" @click="del(item.id)" src="../../assets/freelance/images/delete_2.png"/>
                </div>
            </div>
        </div>
        <router-link class="add" to="/freelance/addspecialty">
            <img src="../../assets/freelance/images/add.png"/>
            增加
        </router-link>
    </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {
  },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    onLoad () {

    },
    updateclick (id) {
      this.$router.push({
        path: '/freelance/addspecialty',
        query: {
          id: id
        }
      })
    },
    del (id) {
      var that = this
      that.$dialog
        .confirm({
          title: '系统提示',
          message: '确定要删除吗?'
        })
        .then(() => {
          const param = {
            id: id,
            type: 1
          }
          http
            .post(api.del_item, param)
            .then(res => {
              if (parseInt(res.code) === 200) {
                this.$notify({ type: 'success', message: res.message })
                this.fetchData()
              } else {
                this.$notify(res.message)
              }
            }).catch(err => {
              console.log(err)
            })
        })
        .catch(() => {})
    },
    fetchData () {
      http.get(api.pre_save_resume)
        .then(res => {
          this.list = [...res.data.skills]
        }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.list{
    padding: 0px 12px 0px 12px;
    .item{
        padding: 0px 6px 0px 6px;
        height: 60px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        position: relative;
        .name{
            width: calc(100vw - 36px - 85px);
            line-height: 1;
            font-size: 15px;
            color: #2a3140;
        }
        .btndiv{
            position: absolute;
            right: 6px;
            display: flex;
            align-items: center;
            .update{
                width: 12px;
                height: 12px;
            }
            .delete{
                margin-left: 12px;
                width: 14px;
                height: 14px;
            }
        }
    }
}
.add{
    margin-bottom: 30px;
    margin-left: 21px;
    width: calc(100vw - 42px);
    height: 47px;
    display: flex;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #464646;
    border-radius: 50px;
    background-color: #fed700;
    box-shadow: 0px 1px 7px rgba($color: #fed700, $alpha: 0.8);
    img{
        width: 15px;
        height: 15px;
        margin-right: 10px;
    }
}
</style>
